<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title></title>
		<link rel="stylesheet" type="text/css" href="/statics/sp/css/reset.css"/>
		<link rel="stylesheet" href="/statics/sp/css/chat.css">
		<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
		<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
		<script type="text/javascript" src="/statics/sp/sdk/webimSDK3.1.2.js"></script>
		<script type="text/javascript" src="/statics/sp/sdk/EMedia_x1v1.js"></script>
		<script type="text/javascript" src="/statics/sp/js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="/statics/sp/js/WebIMConfig.js"></script>
		<script type="text/javascript" src="/statics/sp/js/localstorage.js"></script>
		<script type="text/javascript" src="/statics/sp/utils/getMsgData.js"></script>
		<script type="text/javascript" src="/statics/sp/utils/msgtype.js"></script>
		<script type="text/javascript" src="/statics/sp/utils/dialog.js"></script>
		<script type="text/javascript" src="/statics/sp/utils/login.js"></script>
		<script type="text/javascript" src="/statics/sp/js/webconn.js"></script>
		<script type="text/javascript" src="/statics/sp/sdk/webconn.js"></script>
		<script type="text/javascript" src="/statics/sp/sdk/vconsole.min.js"></script>
	</head>
	<body>
		<div class="chatBigBox" id="chatBigBox" @click="close">
			<p @click="cj">创建会议</p>
			<p @click="sp">视频</p>
			<p @click="gx">共享</p>
			<!-- <p @click="gx">退出共享</p> -->
			<video id="sp" style="width: 300px;height: 300px;"></video>
			<video id="gx" style="width: 300px;height: 300px;"></video>
		</div>
	</body>
</html>
<script type="text/javascript">
	WebIM.message = WebIM.default.message;
	// 初始化vConsole
	// window.vConsole = new window.VConsole({
	//   defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
	//   maxLogNumber: 1000,
	//   // disableLogScrolling: true,
	//   onReady: function() {
	//     console.log('vConsole is ready.');
	//   },
	//   onClearLog: function() {
	//     console.log('on clearLog');
	//   }
	// });
	var webvue = new Vue({
		el: '#chatBigBox',
		data() {
			return {
				ticket:'',
			}
		},
		mounted(){
			var that = this;
			isfirst = false;
			relogin() 
			this.name = getStorage('myid');
			console.log(this.name)
			window.onbeforeunload = function (e) {
				console.log('离开了')
				that.outvideo()
			};
		},
		methods:{
			cj(){
				var that = this;
				that.showvideocall = true;
				// confrType: 会议类型；password: 会议密码；rec:是否录制；recMerge：是否合并录制；supportWechatMiniProgram：会议是否支持微信小程序
				let params = {
					 confrType:'Communication', 
					 password:'123456', 
					 rec:false, 
					 recMerge:false, 
					 supportWechatMiniProgram:true,
					 maxTalkerCount:2,//会议最大主播人数
					 maxVideoCount: 6, //会议最大视频数
					 maxPubDesktopCount:1, //会议最大共享桌面数
					 maxAudienceCount:100 //会议最大观众数
				}
				emedia.mgr.createConference(params).then(function(confr){
					//创建会议
					console.log(confr);
					that.confrId = confr.confrId;
					that.password = confr.password;
					that.ticket = confr.ticket;
					// emedia.mgr.joinConferenceWithTicket(that.confrId,ticket).then(function(confr2){
					// 	//加入会议
					// 	console.log('加入会议')
					// 	that.sendmsgfunc('视频会议中，点击进入','isvideo')
					// 	var videohtml = document.createElement('video');
					// 	var viclassname = videohtml.className;
					// 	viclassname += 'videocall ';
					// 	viclassname += that.name;
					// 	videohtml.className = viclassname;
					// 	var videoeachbox = document.createElement('div');
					// 	videoeachbox.setAttribute("onclick", "videobig(this)");
					// 	videoeachbox.className = 'videoeachbox';
					// 	var videoeachname = document.createElement('p');
					// 	videoeachname.innerHTML = that.name;
					// 	videoeachbox.append(videohtml,videoeachname)
					// 	document.getElementById('videobox').appendChild(videoeachbox)
					// 	var constaints = {
					// 		audio: true, 
					// 		video: true		
					// 	}
					// 	emedia.mgr.publish(constaints,videohtml,'发布视频流').then(function(pushedStream){
					// 		//发布音视频流,stream 对象
					// 		console.log(pushedStream)
					// 	}).catch(function(error3){
					// 		console.log(error3)
					// 	});
					// }).catch(function(error2){
					// 	console.log(error2)
					// })
				}).catch(function(error){
					console.log(error)
				})			
			},
			sp(){
				var that = this;
				emedia.mgr.joinConferenceWithTicket(that.confrId,that.ticket).then(function(confr2){
					//加入会议
					console.log('加入会议')
					// that.sendmsgfunc('视频会议中，点击进入','isvideo')
					// var videohtml = document.createElement('video');
					// var viclassname = videohtml.className;
					// viclassname += 'videocall ';
					// viclassname += that.name;
					// videohtml.className = viclassname;
					// var videoeachbox = document.createElement('div');
					// videoeachbox.setAttribute("onclick", "videobig(this)");
					// videoeachbox.className = 'videoeachbox';
					// var videoeachname = document.createElement('p');
					// videoeachname.innerHTML = that.name;
					// videoeachbox.append(videohtml,videoeachname)
					// document.getElementById('videobox').appendChild(videoeachbox)
					var videohtml = $('#sp')[0]
					var constaints = {
						audio: true, 
						video: true		
					}
					emedia.mgr.publish(constaints,videohtml,'发布视频流').then(function(pushedStream){
						//发布音视频流,stream 对象
						console.log(pushedStream)
					}).catch(function(error3){
						console.log(error3)
					});
				}).catch(function(error2){
					console.log(error2)
				})
			},
			gx(){
				// var videohtml = document.createElement('video');
				// videohtml.className = 'sharebox';
				// document.getElementById('chatBigBox').appendChild(videohtml);
				let deskStream;
				var params = {
				    videoConstaints: true,
				    withAudio: true,
				    videoTag: $('#gx')[0],
				    // ext: '桌面流',
				    confrId: this.confrId,
				    stopSharedCallback: function () {
				        emedia.mgr.hungup(deskStream);
				    }
				
				}
				emedia.mgr.shareDesktopWithAudio(params).then(function (pushedStream) {
				    console.log('>>> 桌面共享成功', pushedStream);
				    deskStream = pushedStream;
				}).catch(function (error) {
				    console.log('>>> 桌面共享失败', error);
				});
			},

		}
	})
	
	//有人加入会议，其他人调用joinXX等方法，如果加入成功，已经在会议中的人将会收到
	emedia.mgr.onMemberJoined = function (member) {
	    console.log('有人加入会议,其他人调用joinXX等方法，如果加入成功，已经在会议中的人将会收到')
		console.log(member)
	};
	//有人退出会议
	emedia.mgr.onMemberExited = function (member) {
	    console.log('有人退出会议')
		console.log(member)
		$('.'+member.name).remove()
	};
	//有媒体流添加；比如 自己调用了publish方法（stream.located() === true时），或其他人调用了publish方法。
	emedia.mgr.onStreamAdded = function (member, stream) {
		console.log('有媒体流添加',member)
		if(!stream.located()){
			var videohtml = document.createElement('video');
			videohtml.className = member.name
			var videoeachbox = document.createElement('div');
			videoeachbox.setAttribute("onclick", "videobig(this)");
			videoeachbox.className = 'videoeachbox';
			var videoeachname = document.createElement('p');
			videoeachname.innerHTML = member.name;
			videoeachbox.append(videohtml,videoeachname)
			document.getElementById('videobox').appendChild(videoeachbox)
			var constaints = {
				audio: true, 
				video: true		
			}
			emedia.mgr.streamBindVideo(stream, videohtml);
			emedia.mgr.subscribe(member, stream, true, true, videohtml)
		}	
	};
	//有媒体流移除
	emedia.mgr.onStreamRemoved = function (member, stream) {
		console.log('有媒体流移除')
		var videocall_length = $('.videocall').length;
		webvue.$message('有媒体流移除');
		if(webvue.videocallmember > 1){
			emedia.mgr.selectConfr(webvue.confrId,webvue. password).then(function(res){
			    console.log('会议信息',res)
				webvue.videocallmember = res.confr.memTotal;
			}).catch(function(error){
			
			})
		}
	};
	//角色改变
	emedia.mgr.onRoleChanged = function (role) {
		console.log('角色改变')
	};
	//会议退出；自己主动退 或 服务端主动关闭；
	emedia.mgr.onConferenceExit = function (reason, failed) {
	    var reason = (reason || 0);
	    switch (reason){
	        case 0:
	            reason = "正常挂断";
	            break;
	        case 1:
	            reason = "没响应";
	            break;
	        case 2:
	            reason = "服务器拒绝";
	            break;
	        case 3:
	            reason = "对方忙";
	            break;
	        case 4:
	            reason = "失败,可能是网络或服务器拒绝";
	            if(failed === -9527){
	                reason = "失败,网络原因";
	            }
	            if(failed === -500){
	                reason = "Ticket失效";
	            }
	            if(failed === -502){
	                reason = "Ticket过期";
	            }
	            if(failed === -504){
	                reason = "链接已失效";
	            }
	            if(failed === -508){
	                reason = "会议无效";
	            }
	            if(failed === -510){
	                reason = "服务端限制";
	            }
	            break;
	        case 5:
	            reason = "不支持";
	            break;
	        case 10:
	            reason = "其他设备登录";
	            break;
	        case 11:
	            reason = "会议关闭";
	            break;
	    }
		console.log(reason)
	};
	//管理员变更
	emedia.mgr.onAdminChanged = function(admin){
		console.log(admin)
	}
	
	function videobig(event){
		console.log(event)
		
		if($(event).hasClass('videobigger')){
			$(event).removeClass('videobigger')
			$('.videoeachbox').show();
		}else{
			$('.videoeachbox').hide();
			$(event).addClass('videobigger')
			$('.videobigger').show()
		}
	}
	function isMobile() {
		var userAgentInfo = navigator.userAgent
		var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
		var mobile_flag = false;
		//根据userAgent判断是否是手机
		for (var v = 0; v < mobileAgents.length; v++) {
			if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
				mobile_flag = true;
				break;
			}
		}
		 var screen_width = window.screen.width;
		 var screen_height = window.screen.height;   
		 //根据屏幕分辨率判断是否是手机
		 if(screen_width < 500 && screen_height < 800){
			 mobile_flag = true;
		 }
		 return mobile_flag;
	}
</script>
